<template>
   <div id="app4" v-loading.fullscreen.lock="showloading">
        <div class="middle">
          <table  border="0" width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td><span :class="{titleaction:true}">我的油卡</span></td>
            </tr>
          </table>
        </div>
        <div> 
          <div>
            <div class='oil-list' v-if='selfOil.oilCardNum'>
              <p style='padding-top:10px;'>
                <span>油卡卡号：</span>
                <span>
                  {{selfOil.oilCardNum}}
                </span>
              </p>
              <p>
                <span>激活时间：</span>
                <span>{{time(selfOil.activeTime)}}</span>
              </p>
              <p style='padding-bottom:10px;'>
                <span>用户名：</span>
                <span>&nbsp;&nbsp;&nbsp;{{selfOil.userName}}</span>
              </p>
            </div> 
          </div> 
        </div>
        <div class="middle">
          <table  border="0" width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td><span :class="{titleaction:true}">我旗下的油卡</span></td>
            </tr>
          </table>
        </div>
        <div v-if='zhanweiOff' style='height:240px;margin:150px auto;'>
           <img src="../static/img/no-data.png" height="100%" width="100%" alt="">
        </div>
        <div> 
          <div class='oil-list' v-for='(val,index) in invitationOil' :key='index'>
            <p style='padding-top:10px;'>
              <span>油卡卡号：</span>
              <span>
                {{val.oilCardNum}}
              </span>
            </p>
            <p>
              <span>激活时间：</span>
              <span>{{time(val.activeTime)}}</span>
            </p>
            <p style='padding-bottom:10px;'>
              <span>用户名：</span>
              <span>&nbsp;&nbsp;&nbsp;{{val.userName}}</span>
            </p>
           </div> 
        </div>
    </div> 
</template>
<script>
import {AJAX,URL_USER_OILLIST,_layer,HREF} from '@/comm.js';
export default {
  data(){
    return ({
      showloading:false,
      zhanweiOff:true,
      selfOil:{},
      invitationOil:[],
    });
  },
  beforeCreate: function() {
      $("title").text("我的油卡");
  }, 
  created(){
    this.showloading=true;
    let This=this;
    $.get(URL_USER_OILLIST,function(data){
      This.showloading=false;
      console.log('用户油卡数据');
      console.log(data);
      if(data.retult){
        if(!String(data.data.oilCardNum).trim()&&data.data.list.length==0){
          This.zhanweiOff=true;
        }else{
          This.zhanweiOff=false;
        }
        This.selfOil.oilCardNum=data.data.oilCardNum;
        This.selfOil.activeTime=data.data.activeTime;
        This.selfOil.userName=data.data.userName;
        This.invitationOil=data.data.list;
      }else{
        _layer('获取油卡列表数据失败');
        setTimeout(function(){
          window.location.href=HREF+'/extension.html'
        },2000);
      }
    });
  },
  methods: {
      time(timestamp){
        if(timestamp){
          return ;
        }
        var date;
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        if(String(timestamp).length==10){
          date=new Date(Number(timestamp) * 1000);
        }else{
          date=new Date(Number(timestamp));
        }
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        let D = date.getDate() + ' ';
        let h = date.getHours() + ':';
        let m = date.getMinutes() + ':';
        let s = date.getSeconds();
        return Y+M+D+h+m+s;
      },
  }
}
</script>
<style scoped>
.profit{
  height:100%;
}
.profit p:first-of-type{
  height:60%;
  font-size:40px;
  line-height:54px;
  text-align:center;
  color:white
}
.profit p:last-of-type{
  height:40%;
  font-size:16px;
  text-align:center;
  color:white;
}
#app4 .middle {
  height:45px;
  text-align: center;
  line-height: 45px;
  background-color: white;
  font-size: 16px;
  border-bottom: 1px solid #f7f7f7;
}
.oil-list{
  margin: 15px 0;
  background: #ecf5ff;
}
.oil-list p{
  margin: 8px;
  padding: 2px;
  color: #36abf5;
}
.oil-list p span:last-of-type{
  font-size:17px;
  color:#409eff;
}
</style>

